<template>
	<view>
		<view class="input_lists">
			<view class="input_list">
				<input type="number" data-name="phone" v-model="formData.phone" placeholder="请输入手机号" maxlength="11"
				placeholder-style="font-size:20upx;color:#999999;" @input="openCancel($event,'phone', 'hidePhone')"/>
				<image @tap="cleanUp('phone', 'hidePhone')" src="../../static/clear.png" v-if="hidePhone"></image>
			</view>
			<view class="input_list">
				<input type="text" placeholder="请输入验证码"  data-name="verify_code" v-model="formData.verify_code"
				placeholder-style="font-size:20upx;color:#999999;" @input="openCancel($event,'password', 'hidePassword')"/>
				<view class="getverifycode" v-show="show" @tap="getVerifyCode()">获取验证码</view>
				<view class="getverifycode" v-show="!show">{{count}}s后获取</view>
			</view>
			<view class="input_list">
				<input type="text" password="true" data-name="password" v-model="formData.password" placeholder="请输入密码" 
				placeholder-style="font-size:20upx;color:#999999;" @input="openCancel($event,'password', 'hidePassword')"/>
				<image @tap="cleanUp('password', 'hidePassword')" src="../../static/clear.png" v-if="hidePassword"></image>
			</view>
		</view>
		<view class="login" @tap="formSubmite">
			<view>确定</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				show: true,
				count: '',
				timer: null,
				hidePhone: false,
				hidePassword: false,
				formData: {
					phone: '',
					verify_code: '',
					password: ''
				}
			}
		},
		methods: {
			// 清除
			cleanUp(type, status) {
				this.formData[type] = ''
				this[status] = false
			},
			openCancel(event, type, status) {
				if(event.target.dataset.name == type){
					if(event.detail.value.length > 0) {
						this[status] = true
					}else{
						this[status] = false
					}
				}
			},
			//获取验证码
			getVerifyCode() {
				let reg = /^1[0-9]{10}$/;
				if (!this.formData.phone) {
					uni.showToast({
						title:'请输入手机号',
						icon: 'none',
					})
					return false
				} else {
					if (!reg.test(this.formData.phone)) {
						uni.showToast({
							title:'请输入正确的手机号',
							icon: 'none',
						})
						return false
					}
				}
				// 倒计时
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
				// 请求
				uni.request({
					url: request.common.baseUrl+'/api/login/sendSms',
					data: {
						phone:this.formData.phone
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							uni.showToast({
								title:res.data.msg,
								icon: 'none',
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon: 'none',
							})
						}
					}
				});
			},
			// 请求登录
			formSubmite() {
				let reg = /^1[0-9]{10}$/;
				if (!this.formData.phone) {
					uni.showToast({
						title:'请输入手机号',
						icon: 'none',
					})
					return false
				} else {
					if (!reg.test(this.formData.phone)) {
						uni.showToast({
							title:'请输入正确的手机号',
							icon: 'none',
						})
						return false
					}
				}
				if (!this.formData.verify_code) {
					uni.showToast({
						title:'请输入验证码',
						icon: 'none',
					})
					return false
				}
				if (!this.formData.password) {
					uni.showToast({
						title:'请输入密码',
						icon: 'none',
					})
					return false
				}
				uni.request({
					url: request.common.baseUrl+'/api/login/wfindPassword',
					data: {
						phone:this.formData.phone,
						verify_code:this.formData.verify_code,
						password:this.formData.password,
						openid:uni.getStorageSync('keyOpenid'),
						nickname:uni.getStorageSync('keyNickname'),
						headimgurl:uni.getStorageSync('keyHeadimgurl'),
						sex:uni.getStorageSync('keySex'),
						city:uni.getStorageSync('keywCity')
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							uni.setStorageSync('keyToken',res.data.data.Token)
							uni.navigateBack({
								delta:2
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon: 'none',
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
page{
	background-color: #ffffff;
}
.logo{
	width:750upx;
	text-align:center;
}
.logo image{
	width:200upx;
	height:200upx;
	padding-top:100upx;
}
.logo view{
	font-size:32upx;
	color:#333333;
	margin-top:-10upx;
}
.input_lists{
	width:600upx;
	margin:100upx 75upx 15upx;
}
.input_list{
	width:600upx;
	height:100upx;
	position:relative;
}
.input_list input{
	width:600upx;
	height:100upx;
	font-size:32upx;
	color:#333333;
	float:left;
	border-bottom:1upx solid #f6f6f6;
}
.input_list image{
	width:20upx;
	height:20upx;
	float:right;
	position:absolute;
	margin-top:50upx;
	margin-left:-30upx;
}
.getverifycode{
	float:right;
	position:absolute;
	right:0;
	top:30upx;
	color:#52c41a;
}
.login{
	margin-top:80upx;
	text-align:center;
}
.login view{
	background-color: #52c41a;
	color:#FFFFFF;
	font-size:28upx;
	width:600upx;
	height:80upx;
	line-height:80upx;
	margin:auto;
	border-radius:40upx;
}

</style>
